<template>
  <div class="layout">
    <aside class="sidebar">
      <!-- 显示头像和登录时间 -->
      <div class="user-info">
        <img :src="userAvatar" alt="用户头像" class="avatar" />
        <p style="color: rgba(51, 51, 51, 0.926); font-weight: bold; font-size: 15px;">{{ username }}</p>
        <p style="color: rgba(51, 51, 51, 0.926); font-size: 12px;">{{ loginTime }}</p>
      </div>
      <hr style="border: 1px solid #E4E4E4; width: 60%; margin: 10% 10% 5% 20%;">
      <!-- 教师侧边栏 -->
      <ul class="nav-links">
                  <li><router-link :to="`/teacher/TeacherSet`" exact>个人设置</router-link></li>
          <li><router-link :to="`/teacher/T_class`" exact>教学课堂</router-link></li>
        <li>
       <div class="expand-header" @click="toggleResourceMenu">
        <span class="arrow" :class="{ open: showResources }">▶</span>
        <span :class="{ 'highlighted': showResources }">教学资源</span>
      </div>

        <ul v-show="showResources" class="sub-menu">

          <li><router-link to="/teacher/T_word">教学文档</router-link></li>
          <li><router-link to="/teacher/T_videos">教学视频</router-link></li>
          <li><router-link to="/teacher/T_images">图片库</router-link></li>
          <li><router-link to="/teacher/T_question_bank">试题库</router-link></li>
          <li><router-link to="/teacher/T_exam_bank">试卷库</router-link></li>
          <li><router-link to="/teacher/T_QA">问卷库</router-link></li>
        </ul>
      </li>
      </ul>
    </aside>

    <!-- 主要内容区域 -->
    <div class="main-content" style="overflow-x: hidden;">
      <!-- 主要内容将放在这里 -->
    </div>
  </div>
</template>

<script>
import { ref,computed } from 'vue';
import { useRoute } from 'vue-router';

export default {
  name: 'TeacherSidebar',
  props: {
    username: {
      type: String,
      required: true
    },
    userAvatar: {
      type: String,
      required: true
    },
    loginTime: {
      type: String,
      required: true
    }
  },
  setup() {
    const route = useRoute();
    const showResources = ref(false);
    const toggleResourceMenu = () => {
      showResources.value = !showResources.value;
    };
    const isExamBankActive = computed(() => {
      return route.path.startsWith('/teacher/T_exam_bank');
    });

    return {
      showResources,
      toggleResourceMenu,
      isExamBankActive
    };
  }
};
</script>

<style scoped>
.highlighted {
  color: #244382;
  font-weight: bold;
}
.expand-header {
  cursor: pointer;
  padding: 8px 10px;
  padding-left: 20%;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  display: flex; /* 新增，使用 Flex 布局 */
  align-items: center;
  gap: 6px; /* 控制文字和箭头间距 */
  transition: background-color 0.3s;
}


.expand-header:hover {
  background-color: #f0f0f0;
}

.arrow.open {
  transform: rotate(90deg);
  color: #2E508F;
}
.arrow {
  margin-left: -20px; /* 将箭头移到最右边 */
  transform: rotate(0deg);
  transition: transform 0.3s ease;
  font-size: 12px;
}

.arrow.open {
  transform: rotate(90deg);
}
.sub-menu {
  padding-left: 40px;
  list-style-type: none; /* 去掉小圆点 */
  margin-left: -3px;
}

.sub-menu li a {
  padding: 6px 10px;
  display: block;
  font-size: 13px;
  color: #444;
  text-decoration: none;
}

.sub-menu li a.router-link-active {
  color: #244382;
  font-weight: bold;
}
.layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #F8F9FA;
}
.sidebar {
  width: 240px;
  background-color: #fff;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.nav-links {
  list-style-type: none;
  padding: 0;
  margin: 0;
  margin-bottom: 10%;
}

.nav-links a {
  text-decoration: none;
  color: rgba(51, 51, 51, 0.926);
  font-weight: 500;
  display: block;
  padding: 8px 10px;
  padding-left: 20%;
  transition: background-color 0.3s;
  font-size: 14px;
}

.nav-links a:hover {
  background-color: #f0f0f0;
}

.nav-links a.router-link-active {
  color: #244382;
  border-left: 3px solid #2E508F;
  padding-left: -30px;
  font-weight: bold;
  margin-left: -3px;
}

.user-info {
  text-align: center;
  margin-bottom: 20px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-top: 10%;
}

.user-info p {
  margin: 5px 0;
}
.active-link a{
  color: #244382;
  /* border-left: 3px solid #2E508F; */
  font-weight: bold;
  margin-left: -3px;
}

</style>
